import React, { useState } from "react";
import { TabBar } from 'zarm';
import './style.less'
import CustomIcon from "../CustomIcon";
import { useLocation ,useNavigate} from "react-router-dom";
//import PropsTypes from "prop-types";
const NavBar = ({ showNav }) => {
    const { pathname } = useLocation()
    const [activeKey, setActiveKey] = useState(pathname)
    const navigate = useNavigate()
    //console.log(pathname);
    const changeTab = (path) => {
        setActiveKey(path)
        navigate(path)
    }

    return (
        <TabBar className="tab" visible={showNav} activeKey={activeKey} onChange={changeTab}>
            <TabBar.Item
                itemKey="/"
                title="账单"
                icon={<CustomIcon type="zhangdan" />}
            />
            <TabBar.Item
                itemKey="/data"
                title="统计"
                icon={<CustomIcon type="tongji" />}
            />
            <TabBar.Item
                itemKey="/user"
                title="我的"
                icon={<CustomIcon type="wode" />}
            />
        </TabBar>
    )
}
// NavBar.propTypes ={
//   showNav:PropsTypes.bool
// }
export default NavBar